<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>条件渲染</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <!-- v-show 表示隐藏, 但是节点存在 -->
        <div id="root">
            <h2 v-show="true">欢迎光临1: {{name}}</h2>
            <h2 v-show="1 === 2">欢迎光临2: {{name}}</h2>
            <h2 v-show="a">欢迎光临3: {{name}}</h2>
            <button @click="n++">切换{{n}}</button>

            <!-- v-if 表示是否渲染, 但是节点可能不存在 -->
            <h2 v-if="true">欢迎光临4: {{name}}</h2>
            <h2 v-if="1 === 1">欢迎光临5: {{name}}</h2>

            <div v-if="n === 1">A</div>
            <div v-if="n === 2">B</div>
            <div v-if="n === 3">C</div>


            <div v-if="n === 1">X</div>
            <div v-else-if="n === 1">Y</div> <!-- y 是被短路的, 如论如何都不会被展示. 一组if else if else 不允许被打断.-->
            <div v-else-if="n === 3">Z</div>
            <div v-else>Zzzzz</div>

            <template v-if="n === 1"> <!-- template 标签可以代替div, 但是不会被渲染出来. 可以配合v-if 使用, 但是不能配合v-show使用-->
                <div>template-A</div>
                <div>template-B</div>
                <div>template-C</div>
            </template>
        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                n:0,
                name: '王五',
                a: true
            }
        })
    </script>
</html>